<template>


  <div class="block">
    <div v-html="htmlContent"></div>
    <el-table
        :data="tableDataLip"
        style="width: 100%">

      <el-table-column label='导入结果' prop='crawlResult' show-overflow-tooltip>
        <template slot-scope='scope'>
          <span>{{ scope.row.crawlResult }}</span>
          <el-popover trigger='hover' placement='top'>
            <el-card>
              <el-button type='text' size="medium" title='点击复制' icon='el-icon-document-copy'
                         @click='handleCopyLink(scope.row.detailMsg)'></el-button>
              详细结果：{{ scope.row.detailMsg }}
            </el-card>
            <span slot='reference' class='name-wrapper'>
                <i class='el-icon-success' style="color: green" v-if="scope.row.crawlResult == '成功'">详情</i>
                <i class='el-icon-error' style="color: red" v-if="scope.row.crawlResult == '失败'">详情</i>
              </span>
          </el-popover>
        </template>
      </el-table-column>



    </el-table>

    <!--    <el-input v-model="query.item" style="width: 200px" placeholder="明细"/>-->
    <!--    <el-input v-model="query.type" style="width: 200px" placeholder="类型"/>-->
    <!--    <div>-->
    <!--      <span class="demonstration">开始时间</span>-->
    <!--      <el-date-picker-->
    <!--          v-model="query.startDate"-->
    <!--          align="right"-->
    <!--          type="datetime"-->
    <!--          placeholder="选择开始日期"-->
    <!--          :picker-options="pickerOptions"-->
    <!--          @change="updateDateFormat('query.startDate',$event)">-->
    <!--        >-->
    <!--      </el-date-picker>-->
    <!--      <span class="demonstration">截至时间</span>-->
    <!--      <el-date-picker-->
    <!--          v-model="query.endDate"-->
    <!--          align="right"-->
    <!--          type="datetime"-->
    <!--          placeholder="选择截至日期"-->
    <!--          :picker-options="pickerOptions"-->
    <!--          @change="updateDateFormat('query.endDate',$event)">-->
    <!--      </el-date-picker>-->
    <!--    </div>-->
    <!--    <el-button type="primary" style="width: 200px" @click="getList">查询</el-button>-->
    <!--    <el-button type="primary" style="width: 200px" @click="handeleAdd">新增</el-button>-->
    <!--    <el-table-->
    <!--        :data="tableData"-->
    <!--        style="width: 100%">-->
    <!--      <el-table-column-->
    <!--          prop="id"-->
    <!--          label="位次"-->
    <!--          width="180">-->
    <!--      </el-table-column>-->
    <!--      <el-table-column-->
    <!--          prop="item"-->
    <!--          label="明细"-->
    <!--          width="180">-->
    <!--      </el-table-column>-->
    <!--      <el-table-column-->
    <!--          prop="type"-->
    <!--          label="类型"-->
    <!--          width="180">-->
    <!--      </el-table-column>-->
    <!--      <el-table-column-->
    <!--          prop="operateStatus"-->
    <!--          label="操作"-->
    <!--          width="180"-->
    <!--          :formatter="formatGender"-->
    <!--      >-->
    <!--      </el-table-column>-->
    <!--      <el-table-column-->
    <!--          prop="money"-->
    <!--          label="金额"-->
    <!--          width="180">-->
    <!--      </el-table-column>-->
    <!--      <el-table-column-->
    <!--          prop="createDate"-->
    <!--          label="时间"-->
    <!--          width="180">-->
    <!--      </el-table-column>-->
    <!--      <el-table-column label="操作">-->
    <!--        <template slot-scope="scope">-->
    <!--          <el-button-->
    <!--              size="mini"-->
    <!--              @click="handleEdit(scope.$index, scope.row)">编辑-->
    <!--          </el-button>-->
    <!--          <el-button-->
    <!--              size="mini"-->
    <!--              type="danger"-->
    <!--              @click="handleDelete(scope.$index, scope.row)">删除-->
    <!--          </el-button>-->
    <!--        </template>-->
    <!--      </el-table-column>-->
    <!--    </el-table>-->
    <!--    <el-pagination-->
    <!--        @size-change="handleSizeChange"-->
    <!--        @current-change="handleCurrentChange"-->
    <!--        :current-page="this.query.page"-->
    <!--        :page-sizes="[5, 20, 50, 100]"-->
    <!--        :page-size="this.query.size"-->
    <!--        layout="total, sizes, prev, pager, next, jumper"-->
    <!--        :total="this.total">-->
    <!--    </el-pagination>-->
    <!--    <el-dialog :title="title" :visible.sync="billDialogVisible">-->
    <!--      <el-form :model="form" label-width="80px" ref="form">-->
    <!--        <el-form-item label="明细">-->
    <!--          <el-input v-model="form.item" placeholder="请输入明细"/>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="类型">-->
    <!--          <el-input v-model="form.type" placeholder="请输入类型"/>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="金额">-->
    <!--          <el-input v-model="form.money" placeholder="请输入金额"/>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="操作">-->
    <!--          <el-input v-model="form.operateStatus" placeholder="请输入操作"/>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="时间">-->

    <!--          <el-date-picker-->
    <!--              v-model="form.createDate"-->
    <!--              type="datetime"-->
    <!--              placeholder="请输入时间"-->
    <!--              format="yyyy-MM-dd HH:mm:ss"-->
    <!--              :picker-options="pickerOptions"-->
    <!--              @change="updateDateFormat('form.createDate',$event)">-->
    <!--          </el-date-picker>-->

    <!--          &lt;!&ndash;          <el-input v-model="form.createDate" placeholder="请输入时间"/>&ndash;&gt;-->
    <!--        </el-form-item>-->
    <!--        <el-form-item>-->
    <!--          <el-button @click="clearForm">关闭</el-button>-->
    <!--          <el-button type="primary" @click="submitForm">保存</el-button>-->
    <!--        </el-form-item>-->
    <!--      </el-form>-->
    <!--    </el-dialog>-->
    <label class="text-reader">
      <input type="file" @change="loadTextFile">
    </label>
    <!--    <div class="text-reader-content" v-text="fileContent"></div>-->
  </div>
</template>
<script>

// import moment from 'moment'; // 导入日期处理库
import MarkdownIt from 'markdown-it'

export default {
  name: "LedgerCrudView",

  data() {
    return {
      tableDataLip: [
        {
          detailMsg: '数据有误',
          crawlResult: "失败"
        },
        {
          detailMsg: '数据加载中...',
          crawlResult: "失败"
        },
        {
          detailMsg: '导入成功',
          crawlResult: "成功",
        }
      ],
      htmlContent: '',
      fileContent: '',
      tableData: [],
      title: '编辑菜单',
      billDialogVisible: false,
      // 总数据量
      total: 0,
      query: {
        page: 1,
        size: 10,
        type: "",
        item: "",
        operateStatus: "",
        money: "",
        startDate: "",
        endDate: ""
      },
      form: {
        id: '',
        item: '',
        type: '',
        money: '',
        operateStatus: '',
        createDate: ''
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            const date = new Date();
            const year = date.getFullYear().toString();
            const month = (date.getMonth() + 1).toString().padStart(2, '0');
            const day = date.getDate().toString().padStart(2, '0');
            const hours = date.getHours().toString().padStart(2, '0');
            const minutes = date.getMinutes().toString().padStart(2, '0');
            const seconds = date.getSeconds().toString().padStart(2, '0');

            const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            console.log(formattedDate);
            picker.$emit('pick', formattedDate);
          }
        }, {
          text: '最近30天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 30);
            const year = date.getFullYear().toString();
            const month = (date.getMonth() + 1).toString().padStart(2, '0');
            const day = date.getDate().toString().padStart(2, '0');
            const hours = date.getHours().toString().padStart(2, '0');
            const minutes = date.getMinutes().toString().padStart(2, '0');
            const seconds = date.getSeconds().toString().padStart(2, '0');
            const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            console.log(formattedDate);
            picker.$emit('pick', formattedDate);
          }
        }, {
          text: '最近一年',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 365);
            const year = date.getFullYear().toString();
            const month = (date.getMonth() + 1).toString().padStart(2, '0');
            const day = date.getDate().toString().padStart(2, '0');
            const hours = date.getHours().toString().padStart(2, '0');
            const minutes = date.getMinutes().toString().padStart(2, '0');
            const seconds = date.getSeconds().toString().padStart(2, '0');
            const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            console.log(formattedDate);
            picker.$emit('pick', formattedDate);
          }
        }]
      },
      value1: '',
      value2: '',
    }
  },
  methods: {
    showDetail() {

    },
    a() {
      const md = new MarkdownIt()
      this.htmlContent = md.render(this.fileContent)
      console.log(this.htmlContent)
      console.log("=========================================================")
      console.log(this.fileContent)
    },
    // 加载文本文件
    loadTextFile(event) {
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.onload = (e) => {
        const fileContent = e.target.result;
        console.log(fileContent); // 输出文件内容
        // 可以将文件内容存储到Vue组件的数据中
        this.fileContent = fileContent;
        const md = new MarkdownIt()
        this.htmlContent = md.render(this.fileContent)
        console.log(this.htmlContent)
        console.log("=========================================================")
        console.log(this.fileContent)
      };
      reader.readAsText(file);

    }
  }
  // mounted() {
  //   this.getList();
  // },
  // methods: {
  //   updateDateFormat(key, date) {
  //     console.log("更新时间")
  //     console.log(key)
  //     console.log(date)
  //
  //     if(date){
  //       this[key] = moment(date).format('YYYY-MM-DD HH:mm:ss');
  //       this[key] = moment(this[key]).format('YYYY-MM-DD HH:mm:ss');
  //     }
  //     console.log(this[key])
  //   },
  //
  //   handeleAdd() {
  //     this.billDialogVisible = true;
  //     this.title = '添加菜单';
  //   },
  //   submitForm() {
  //     console.log(this.form);
  //
  //     this.axios.post(
  //         "http://localhost:8081/bill/saveBill", this.form
  //     ).then((resp) => {
  //       console.log(resp);
  //       let data = resp.data;
  //       this.getList();
  //       if (data.success == true) {
  //         this.clearForm();
  //         this.$message({
  //           type: 'success',
  //           message: '保存成功'
  //         });
  //       } else if (data.success == false) {
  //         this.$message({
  //           type: 'error',
  //           message: '保存失败'
  //         });
  //       }
  //     })
  //   },
  //
  //   formatGender(row) {
  //     return row.operateStatus == 0 ? '扣除' : '添加';
  //   },
  //
  //   clearForm() {
  //     this.form = {
  //       id: '',
  //       item: '',
  //       type: '',
  //       money: '',
  //       operateStatus: '',
  //       createDate: ''
  //     },
  //         this.billDialogVisible = false
  //   },
  //
  //   getList() {
  //     this.axios.post(
  //         "http://localhost:8081/bill/getBillList", {
  //           pageNum: this.query.page,
  //           pageSize: this.query.size,
  //           type: this.query.type,
  //           item: this.query.item,
  //           operateStatus: this.query.operateStatus,
  //           money: this.query.money,
  //           startDate: this.query.startDate,
  //           endDate: this.query.endDate
  //         }
  //     ).then((resp) => {
  //       console.log(resp);
  //       console.log(resp.data.data.entityLists);
  //       this.tableData = resp.data.data.entityLists;
  //       this.total = resp.data.data.total;
  //     })
  //   },
  //   // 改变每页显示数量
  //   handleSizeChange(val) {
  //     console.log(`每页 ${val} 条`);
  //     this.query.size = val;
  //     this.getList();
  //   },
  //   // 改变当前页
  //   handleCurrentChange(val) {
  //     console.log(`当前页: ${val}`);
  //     this.query.page = val;
  //     this.getList();
  //   },
  //   // 删除该行记录
  //   handleDelete(index, row) {
  //     console.log(index, row);
  //     console.log("传递的参数" + row.id);
  //     this.axios.post(
  //         "http://localhost:8081/bill/deleteBill", {
  //           id: "2",
  //           type: "1"
  //         }
  //     ).then((resp) => {
  //       console.log(resp);
  //       let data = resp.data;
  //       if (data.success == true) {
  //         this.getList();
  //         this.$message({
  //           type: 'success',
  //           message: '删除成功'
  //         });
  //       }
  //     })
  //   },
  //   handleEdit(index, row) {
  //     console.log(index, row);
  //     this.title = '编辑明细';
  //     this.form = row;
  //     this.billDialogVisible = true;
  //   }
  // }

}
</script>
<style scoped>
</style>